<template>
	<view class="commoditydetails">
		<view class="header-top" style="height: 50rpx">

		</view>
		<view class="header-line" :style="{height:height+'px'}">

			<view class="left" @click="shang">
				<u-icon name="arrow-left" size="17" color="#fff"></u-icon>
			</view>
			<view class="right" style="text-align: center;">
				<view class="search">
					商品详情
				</view>
			</view>

		</view>
		<view class="box" :style="{height:'10'+'px'}">

		</view>
		<view class="commoditydetails_box">
			<view class="commoditydetails_box_dibu">

			</view>
			<view class="commoditydetails_box_shang">
				<view class="commoditydetails_box_shang_lunbo">
					<swiper class="swiper" circular :autoplay="true" @change="changeIndicatorDots" :interval="2000">
						<swiper-item class="swiper-item" v-for="(item,index) in itemObj.sliderImageArr" :key="index">
							<image :src='item'></image>
						</swiper-item>
					</swiper>
					<view class="current">{{current}}/{{imgLength}}</view>

				</view>
				<view class="commoditydetails_box_shang_a">
					<view class="top">
						<text class="text1">{{itemObj.storeName}}</text>
						<text class="text2">已售{{itemObj.sales}}件</text>
					</view>
					<view class="bottom">
						<text class="text3">
							￥
							<text class="text4">{{itemObj.price}}</text>
						</text>
						<text class="text5">原价：￥{{itemObj.otPrice}}</text>
					</view>
				</view>
				<view class="commoditydetails_box_bottom">
					<view class="commoditydetails_box_bottom_box">
						<view class="commoditydetails_box_bottom_a">
							<!-- <view class="commoditydetails_box_bottom_a_a" @click="select">
								<text class="text1">选择</text>
								<text class="text2">颜色/尺码</text>
							</view> -->
							<view class="commoditydetails_box_bottom_a_a">
								<text class="text1">发货</text>
								<text class="text2">免邮</text>
							</view>
							<!-- <view class="commoditydetails_box_bottom_a_a">
								<text class="text1">优惠券</text>
								<text class="text2 text">暂无可用优惠券</text>
							</view> -->
							<!-- <view class="canshu">
								商品参数
							</view>
							<view class="commoditydetails_box_bottom_a_a" v-for="(item,i) in lists" :key="index">
								<text class="text1">{{item.xz}}</text>
								<text class="text2 sb">{{item.ys}}</text>
							</view> -->
						</view>
					</view>

				</view>
				<!-- <view class="changeClass" style="padding: 0 20rpx;">
					<rich-text :nodes="itemObj.description"></rich-text>
				</view> -->
				<view class="u-content" style="padding: 0 20rpx;">
						<u-parse :content="itemObj.description"></u-parse>
					</view>

				
				<view class="bottoms">
					<view class="bottom_left" @click="shoppingmall">
						<image src="../../static/img/sc.png"></image>
						<text>商城</text>
					</view>
					<view class="gouwuche" @click="shopcar">
						加入购物车
					</view>
					<view class="bottom_right" @click="lijigoumai">
						立即购买
					</view>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	import homeServices from '../../service/homeService'
	import shopping from '@/pages/shoppingmall/shopping.vue'
	export default {
		data() {
			return {
				itemObj: {},
				current: 1,
				succesDialogshow: false,
				right: '',
				padding: '',
				top: '',
				height: '',
				ID: 1,
				IDS: 1,
				num: 1,
				commlist: [],
				commlists: [],
				commid: null,
				imgLength: 0,
				imgLengthlist: [],
				productValue: {}

			}
		},
		methods: {
			// lijigoumai() {

			// },
			async lijigoumai() {
				uni.setStorageSync('iddd', this.commid)
				uni.setStorageSync('addressId', '0')
				let res = await homeServices.commoditydetails(this.commid)
				this.storeInfo = res.data.storeInfo
				if (res.data.productValue) {
					for (const key in res.data.productValue) {
						//单规格					
						if (this.storeInfo.specType == '0') {
							this.productValue = res.data.productValue[key]
							console.log(this.productValue)
						}
					}

				}
				let params = {
					cartNum: this.num,
					uniqueId: this.productValue.unique,
					productId: this.productValue.productId,
					new: 1
				}

				let res1 = await homeServices.shoppurchase(params)

				if (res1) {
					let cartId = res1.data.cartId
					uni.setStorageSync('cartId', cartId)
					uni.navigateTo({
						url: '/pagesA/purchase/purchase?cartIds=' + cartId
					})
				}
			},

			async shopcar() {
				let params = {
					cartNum: this.num,
					uniqueId: this.productValue.unique,
					productId: this.productValue.productId
				}
				let res = await homeServices.shoppurchase(params)
				console.log(res, 8888888)

				uni.setStorageSync('cardId', res.data.cartId)
			},
			changeIndicatorDots(e) {
				// console.log(e)
				this.current = e.detail.current + 1;
				// console.log(this.current);
			},
			select() {
				this.succesDialogshow = true
			},
			change(id) {
				this.ID = id
			},
			changetext(id) {
				this.IDS = id
			},
			// 返回商城
			shoppingmall() {
				uni.switchTab({
					url: '/pages/shoppingmall/shopping'
				})
			},
			numjian() {
				if (this.num == 1) {

					uni.showToast({
						title: '必须买一件商品',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
				} else {
					this.num--
				}

			},
			numjia() {
				this.num++
			},
			changeicon() {
				this.succesDialogshow = false
			},
			goumai() {
				uni.redirectTo({
					url: '../purchase/purchase'
				})
			},
			shang() {
				uni.navigateBack()
			},
			async getItem(id) {
				// let params = {
				//  ids: id
				// }
				let res = await homeServices.commoditydetails(id)
				console.log(res.data);

				this.imgLength = res.data.storeInfo.sliderImageArr.length
				let item = res.data.storeInfo.id
				this.commid = item
				console.log(this.commid)
				this.imgLengthlist = res.data.storeInfo.sliderImageArr
				console.log(this.imgLengthlist)
				this.itemObj = res.data.storeInfo
				console.log(this.itemObj, '@@@@')
				if (res.data.productValue) {
					for (const key in res.data.productValue) {
						//单规格					
						if (res.data.storeInfo.specType == '0') {
							this.productValue = res.data.productValue[key]
							console.log(this.productValue)
						}
					}

				}
				// this.$set(this.itemObj.description, 'description', this.formatRichText(this.itemObj.description))
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%"');
				return newContent;
			}

		},
		onShow() {
			// this.lijigoumai()
		},
		onLoad(obj) {
			const {
				id
			} = obj
			this.getItem(id)

			// let meanInfo = uni.getMenuButtonBoundingClientRect()
			// console.log(meanInfo);
			// let ScreenWidth = uni.getSystemInfoSync().screenWidth
			// let rpxTopx = ScreenWidth / 750
			// this.right = 30 * rpxTopx + meanInfo.width
			// this.padding = ScreenWidth - meanInfo.right
			// this.top = meanInfo.top
			// this.height = meanInfo.height
		}
	}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
	@import '@/static/sass/commoditydetails.scss'
</style>
